<template>
  <div class="">
    <van-nav-bar
        title="在线支付"
        left-arrow
        @click-left="onClickLeft"
      />
      
      <div class="step-box">
        <van-steps :active="active">
            <van-step>提交订单成功</van-step>
            <van-step></van-step>
            <van-step>微信支付</van-step>
        </van-steps>
      </div>
      <div class="pay-box">
        <div class="moneybox">
            <p>订单金额</p>
            <h4>￥{{ useDetail.payPrice == 0 ? cartStore.totalPrice/100 : useDetail.payPrice }}  </h4>
            <span>订单提交成功，请在10分钟内完成支付</span>
        </div>
        <!-- 选择支付栏 -->
        <div class="checkpay-box">
            <van-radio-group v-model="checked" checked-color="#555555">
                <van-cell-group inset>
                    <van-cell title="微信支付" clickable @click="checked = '1'">
                        <div class="wechat"><van-icon name="wechat" color="#259B24" size="20px"/></div>
                        <template #right-icon>
                            <van-radio name="1" />
                        </template>
                    </van-cell>
                    <van-cell title="微信好友代付" clickable @click="checked = '2'">
                        <div class="wechat"><van-icon name="wechat" color="#259B24" size="20px"/></div>
                        <template #right-icon>
                            <van-radio name="2" />
                        </template>
                    </van-cell>
                </van-cell-group>
            </van-radio-group>
        </div>

        <div class="btn-pay">
            <van-button color="#EC0D0D" round size="large" @click="payfor">去付款</van-button>
        </div>
    </div>
    <van-overlay :show="show" @click="show = false" >
        <div class="wrapper" @click.stop>
            <div class="block">
                <span style="font-size:12px;color:#AFAFAF" @click="closePay">X</span>
                <p class="psw">请输入支付密码</p>
                <p class="company">红灯笼好吃好喝电子商务有限公司</p>
                <h3>￥{{ useDetail.payPrice == 0 ? cartStore.totalPrice/100 : useDetail.payPrice }}</h3>
                <van-divider />
                <div class="order-detail">
                    <p>订单详情</p>
                    <p>共1笔<van-icon name="arrow" /></p>
                </div>
                <div class="pay-detail">
                    <p>支付详情</p>
                    <p><van-icon name="gold-coin" color="#F9C902" size="18px"/>&nbsp;&nbsp;<span style="color:black">零钱</span><van-icon name="arrow" /></p>
                </div>
                <!-- 密码输入框 -->
                    <van-password-input
                    :value="value"
                    :focused="showKeyboard"
                    :error-info="errorInfo"
                    @focus="showKeyboard = true"
                    />
                    <!-- 数字键盘 -->
                    <van-number-keyboard
                    v-model="value"
                    :show="showKeyboard"
                    @blur="showKeyboard = false"
                    />
            </div>
        </div>
    </van-overlay>
  </div>
</template>

<script setup lang="ts">
import {ref,watch} from 'vue'
import {Toast} from 'vant'
import router from '@/router';
import {useCartStore} from '@/stores/cart'
import {usePyStore} from '@/stores/pyok'
import { useDetailStore } from '@/stores/detail'


    const active = ref(1)
    const checked:any = ref([]);
    const show = ref(false)
    const cartStore = useCartStore()
    const pyokstore = usePyStore()
    const useDetail = useDetailStore()

    const value = ref('');
    const showKeyboard = ref(true);
    const errorInfo = ref('');

    // 关闭支付
    const closePay = ()=>{
        showKeyboard.value = false
        show.value = false
    }
    // 侦听密码输入完成
    watch(value,(newVal)=>{
        if(newVal.length === 6 && newVal !== '123456'){
            errorInfo.value = '密码错误'
        }else{
            errorInfo.value = ''
        }
        if(newVal === '123456'){
            Toast.success('支付成功！')
            pyokstore.list = [...pyokstore.list,...cartStore.list]
            const stateTrue = cartStore.list.find(item=>item.state === true)
            cartStore.list.splice(stateTrue,1)
            useDetail.resetPrice()//重置详情价格
            let second = 1
            const timer =  setInterval(()=>{
                second--
                if(second){
                    Toast.loading({
                    message: '购物成功',
                    forbidClick: true,
                    });
                }else{
                    router.push('/paid')
                    clearInterval(timer);
                }
            },1000)
            
            
        }
    })

    const payfor = ()=>{
        const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
        message: '微信支付',
        });
        let second = 2;
        const timer = setInterval(() => {
            second--
        if (second) {
            toast.message = `正在进入微信`;
        } else {
            show.value = true
            clearInterval(timer);
            Toast.clear();
        }
        }, 1000);

    }
    const onClickLeft = ()=>{
        useDetail.resetPrice()
        router.back()
        useDetail.resetPrice()//重置详情价格=
    }
    
</script>

<style scoped>
:deep(.van-number-keyboard){
    padding-bottom: 0;
}
:deep(.van-divider){
    border-width:1px;
}
.order-detail{
    display: flex;
    color: #878787;
    justify-content: space-between;
    font-size: 14px;

}
.pay-detail{
    display: flex;
    color: #878787;
    justify-content: space-between;
    font-size: 14px;
}
.company{
    font-size: 14px;
    text-align: center;
}
 .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76%;
  }

  .block {
    width: 75%;
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    line-height: 10px;
  }
  .psw{
    font-size: 14px;
    font-weight: 900;
    text-align: center;
  }
.btn-pay{
    margin-top: 40px;
}
.block h3{
    text-align: center;
}
:deep(.van-cell--clickable){
    padding-left: 35px;
}
:deep(.van-cell__value){
    position: absolute;
    text-align: left;
    left:0;
}
.checkpay-box{
    font-size: 14px;
}
.pay-box{
    height: 100%;
    padding: 10px;
    line-height: 15px;
    background-color: #fff;
    width: 85%;
    margin: 0 auto;
    border-radius: 8px;
}
.moneybox{
    text-align: center;
    border-bottom: 1px solid #EFEFEF;
}
.moneybox p{
    font-weight: 900;
    font-size: 14px;
}
.moneybox span{
    display: block;
    font-size: 12px;
    margin-bottom: 30px;
}
.moneybox h4{
    color: red;
}
.step-box{
    width: 70%;
    margin: 0 auto;
}
:deep(--van-steps-background-color){
    background-color: #EFEFEF;

}
:deep(.van-nav-bar__content){
    background-color: rgb(236,13,13);
}
:deep(.van-nav-bar__title ){
    font-weight: 900;
    color: #fff;
}
:deep(.van-nav-bar .van-icon){
    color: white;
}
</style>
